<template>
	<view>
		<uni-nav-bar title="创建群聊" :statusBar="true" :border="false" left-icon="back" :fixed="true"
			@clickLeft="$tab.back()">
		</uni-nav-bar>
		<u-line color="#F8F8F8"></u-line>

		<view class="px-32 py-36">
			<u--form labelPosition="top" :model="form" :rules="rules" ref="uForm" :labelWidth="60">
				<u-form-item label="群名称" prop="groupName" borderBottom>
					<u--input v-model="form.groupName" border="none"></u--input>
				</u-form-item>
				<u-form-item label="群头像" prop="groupAvatar" borderBottom>
					<u-upload :fileList="avatarList" @afterRead="productAfterRead" @delete="productDeletePic" name="群头像"
						:maxCount="1"></u-upload>
				</u-form-item>
				<u-form-item label="群公告" prop="groupNotice" borderBottom>
					<u--input v-model="form.groupNotice" border="none"></u--input>
				</u-form-item>
				<u-form-item label="是否公开" prop="isOpen" borderBottom :labelWidth="70">
					<u-radio-group 
					    v-model="form.isOpen"
					    placement="row">
						<u-radio activeColor="#FF323B" label="公开(所有人可见)" :name="1"></u-radio>
						<u-radio activeColor="#FF323B" label="不公开(仅参与人可见)" :name="2"></u-radio>
					</u-radio-group>
				</u-form-item>
			</u--form>

			<view class="add round-16 text-center text-FFF text-32" style="background: #FF323B;" @click="confirm()">
				创建群聊
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					chatUserIds: [],
					groupAvatar: '',
					groupName: '',
					groupNotice: '',
					isOpen:1
				},
				rules: {
					groupName: {
						type: 'string',
						min: 4,
						max: 16,
						message: '请填写4-16为字符群名称',
						trigger: ['change', 'blur']
					}
				},
				avatarList: [],
			};
		},
		onLoad() {
			this.form.chatUserIds = JSON.parse(uni.getStorageSync('groupChatUser'))
			// setTimeout(() => {
			// 	uni.removeStorageSync('groupChatUser')
			// }, 1000)
		
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			confirm() {
				this.$refs.uForm.validate().then(() => {
					this.$Api.chat.createGroupChat(this.form).then(res=>{
						this.$modal.msg('创建成功!')
						setTimeout(()=>{
							uni.navigateBack({
								delta:2
							})
						},1500)
					})
				})
			},
			productDeletePic(event) {
				switch (event.name) {
					case "群头像":
						this.avatarList.splice(event.index, 1)
						this.form.groupAvatar = ""
						break
				}
			},
			async productAfterRead(event) {
				this.$Api.common.uploadFile(event.file.url).then(res => {
					console.log(res)
					switch (event.name) {
						case "群头像":
							this.avatarList.push({
								url: res.url
							})
							this.form.groupAvatar = res.url
							break
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFFFFF;
	}

	.add {
		width: 480rpx;
		height: 80rpx;
		background: #000000;
		line-height: 80rpx;
		margin: 148rpx auto 0;
	}
	
	/deep/ .u-radio-group--row{
		justify-content: space-around;
		margin-top: 20rpx;
	}
</style>